<!-- 
@author wsq
@date  2016-11-13 
@保险公司产品列表页
-->
<template>
	<div class="C_insuranProduct">
    <div class="hearder">
       <Search 
          class='insP_searcn'
          v-on:value='handleFilter'
          v-on:focus='handleFocus'
          v-bind:placeholder='"输入保险产品名称查找"'
      ></Search>
    </div>
    <div class="con">
      <ul class="insProList">
        <li v-for='product in productList'>
          <insuranceProduct v-bind:product='product'></insuranceProduct>
        </li>
      </ul>
      <searchError 
            v-if='productList.length=="0"&&filterStr!=""'
            v-bind:txt='"搜索不到该结果，您还可以尝试"'
            v-bind:linkCon='"添加此保险产品"'
            v-bind:fnLink='fnLink'
      ></searchError>
      <loading v-bind:loading='loading'></loading>
      <searchError 
            v-if='ajaxError&&filterStr==""'
            v-bind:txt='"无法获取保险产品列表，您可以试试"'
            v-bind:linkCon='"手动添加保险产品名称"'
            v-bind:fnLink='loadErrorLink'
      ></searchError>
    </div>
	</div>
</template>
<script>
import Search from '../components/Search'
import insuranceProduct from '../components/insuranceProduct.vue'
import searchError from '../components/searchError.vue'
import loading from '../components/loading.vue'
import toast from '../components/toast.vue'
import ApiPost from '../api/index'
export default{
	name:'insProductList',
	components: {
		  Search,
	    insuranceProduct,
      searchError,
      loading,
      toast
	},
	data () {
	    return {
            "filterLength":'',
            "filterStr":'',
            "ajaxError":false,
            "loading":false,
            "result":[],
            'companyId':this.$route.query.companyId
	    }
    },
	methods: {
		handleFilter:function (a) {
           this.filterStr = a.filterStr
    },
    getInsProduct:function(){
        this.loading = true ; 
        let companyId = this.$route.query.companyId
        let orgId = companyId || ""
        let reqBody = {
              operationType:'insuranceProductDetail',
              requestData:[{
                "osType":'3'
              },{
                "orgId":orgId,
                "orgKey":"INSURANCE_ORG_KEY"
              }]
          }
          reqBody.requestData = JSON.stringify(reqBody.requestData)
        ApiPost(reqBody,{},function(res){    
          this.loading = false;
          if(res.resultStatus===1000&&res.result){
            window.vueLocalstroge.setItem(this.companyId,res.result);
            this.result = res.result
          }else{
            this.ajaxError = true ;
          }
        }.bind(this),function(e){
          this.loading = false;
          this.ajaxError = true ;
        }.bind(this))
    },
    fnLink:function(){
      let companyName = this.$route.query.companyName
      window.sessionStorage.productName = this.filterStr
      window.YztApp.ubt('我的保险','保险产品列表页_点击_添加此保险产品',{'保险公司名称':companyName,'保险产品名称':this.filterStr})
      this.$router.push({ path: 'addInsurance', query: { productName:this.filterStr,urlEditForm:'product'}})
    },
    loadErrorLink:function(){
      window.sessionStorage.productName = '';
      this.$router.push({ path: 'addInsurance', query: { productName:'',urlEditForm:'product'}})

    },
    handleFocus:function(){

    }
	},//配置计算属性
    computed:{
        productList: function (){
            var ListGroup = [],
                obj={},
                filterStr = this.filterStr,
                dataList = this.result,
                ListGroup = dataList.filter(function(el) {
                  if(filterStr==""){
                    return true
                  }
                  return el.prodName.toLocaleUpperCase().indexOf(filterStr.toLocaleUpperCase())>-1
                }); 
            return ListGroup
        }
    },//监听数据变化
    watch:{
       
    },//组件生命周期--组件被实例化 data被watch
    created:function(){
    },//组件生命周期--已经被render
    mounted:function(){
      this.getInsProduct()
     /* if(window.vueLocalstroge.getItem(this.companyId)!=null){
        this.result = window.vueLocalstroge.getItem(this.companyId);
      }else{
         this.getInsProduct()
      }*/
     
    }
}
</script>
<style>
.C_insuranProduct{
    display:flex;
    flex-direction: column;
    height: 100%;
}

 .hearder{
    background-color: #fff;
    padding: 0 0.533333rem;
    margin: 0.266667rem 0;
  }
  .con{
    display: block;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    overflow: auto;
    position: relative;
     -webkit-overflow-scrolling: touch;
  }
  .insProList{
    padding: 0 .373333rem;
  }
  .loadError{
    padding-top: 2.066667rem;
  }

</style>